<template>
  <div class="tableHeader">

    <el-row v-if="data.mainTitle">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark mainTitle">
          {{ data.mainTitle || "" }}
        </div></el-col
      >
    </el-row>
    <el-row v-if="data.subTitle">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark mainTitle">
          {{ data.subTitle || "" }}
        </div></el-col
      >
    </el-row>
    <el-row justify="end" type="flex" v-if="data.date">
      <el-col :span="12"
        ><div class="grid-content bg-purple-light textRight">
          {{ data.date || "" }}
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object | Function | Array,
      default: () => {
        return {};
      },
    },
  },
  created() {
    this.code();
    this.company();
  },
  methods: {
    code() {
      if (this.data.code == undefined) {
        return null;
      }
    },
    company() {
      if (this.data.company == undefined) {
        return null;
      }
    },
    nameChange(e) {
      this.$emit("nameChange", e);
    },
    nameChange2(e) {
      this.$emit("nameChange2", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.tableHeader {
  width: 100%;
  border-top: 1px solid rgba(31, 179, 255, 0.2);
  border-left: 1px solid rgba(31, 179, 255, 0.2);
  border-right: 1px solid rgba(31, 179, 255, 0.2);
  .el-row {
    padding: 8px 20px;
    color: #ffffff;
    background: rgba(9, 34, 79, 0.22);
    // border-bottom: 1px solid rgba(31, 179, 255, 0.2);
    font-size: 14px;
    .textLeft {
      text-align: left;
    }
    .textRight {
      text-align: right;
    }
    .mainTitle {
      font-size: 20px;
      font-weight: bold;
      padding:10px 0;
      text-align: center;
    }
    .subTitle {
      text-align: center;
      font-weight: 100;
    }
  }
}

.flex {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  .el-input {
    width: 240px;
  }
}
.flex1 {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width:240px;
  }
}
</style>